<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您:{{ name }}，当前信用余额是:{{ bal }}元</div>
    <div>
      <ag-grid-vue
        ref="grid"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :style="{ height: gridHeight }"
        :pagination="false"
        :getRowNodeId="function(params){return params.AutoId}"
        row-selection="multiple"
        class="ag-theme-material"
        @grid-ready="onGridReady"
        @rowDoubleClicked="popEdtBox"
      ></ag-grid-vue>
      <el-pagination
        :total="rowsCount"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="currentPageSelect"
      ></el-pagination>
      <el-dialog :title="message.Title" :visible.sync="dialogFormVisible">
        <span>{{message.Notic}}</span>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { AgGridVue } from 'ag-grid-vue'
import { listNotic } from '@/api/notic'
import { getBal } from '@/api/customer'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name'])
  },
  components: {
    AgGridVue
  },
  data() {
    return {
      dialogFormVisible: false,
      message: {},
      columnDefs: [
        { headerName: '标题', field: 'Title', sortable: true, filter: true },
        { headerName: '日期', field: 'DocDate', sortable: true, filter: true },
        {
          headerName: '消息内容',
          field: 'Notic',
          sortable: true,
          filter: true,
          width: 400,
          cellStyle: function (params) {
            return {
              color: '#ff3366',
            }
          }
        },
      ],
      rowData: null,
      gridHeight: '',
      rowsCount: null,
      currentPage: 1,
      pageSize: 15,
      gridApi: null,
      columnApi: null,
	  bal:0
    }
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    currentPageSelect(pageIdx) {
      if (pageIdx !== this.currentPage) {
        this.currentPage = pageIdx
      }
      const start = (pageIdx - 1) * this.pageSize
      const end = start + this.pageSize
      this.listNotic(start, end)
	  
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPageSelect(1)
    },
    listNotic(pos, size) {
      listNotic(pos, size)
        .then(response => {
          this.rowData = response.Data
          this.rowsCount = response.Cnt
        })
        .catch(error => {
          console.log(error)
          this.rowData = []
          this.rowsCount = 0
        })
    },
	getBal() {
      getBal()
        .then(response => {
          this.bal = response.Data.Bal
        })
        .catch(error => {
          console.log(error)
		  this.bal = 0
        })
    },
    listNoticByDefault() {
      this.listNotic(this.currentPage - 1, this.pageSize)
    },
    popEdtBox() {
      const selectedNodes = this.gridApi.getSelectedNodes()
      const selectedData = selectedNodes.map(node => node.data)
      if (selectedData.length > 1) {
        this.$alert('请只选中一行记录', '提示')
        return
      } else if (selectedData.length === 0) {
      } else {
        this.message = this.rowData.find(function(item) {
          return item.AutoId === selectedData[0].AutoId
        })
        this.dialogFormVisible = true
      }
    }
  },
  mounted() {
    this.gridHeight = window.innerHeight - 20 + 'px'
    const that = this
    window.onresize = function changeGridSize() {
      that.gridHeight = window.innerHeight - 20 + 'px'
    }
    this.listNoticByDefault()
	this.getBal()
  },
  beforeMount() {}
}
</script>
<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
